import { React, useEffect, useState, useCallback, useMemo } from "react";
import request from "../../utils/request"
import { Card, Row, Modal } from "antd"
import { Route } from "react-router";
import List from "./list"
function Ridgepole(props) {
    const [data, changedata] = useState([]);
    const [visible, vhangevisible] = useState(false);
    const [name, chanename] = useState('')
    const getData = useCallback(async () => {
        const list = await request.get('/ridgepole/select');
        const { data: { ret: data } } = list
        console.log(data.data);
        changedata(data.data)
    }, [])
    useEffect(() => {
        getData();

    }, [])
    // const baseURL = useMemo(() => props.match.path, [])
    return (
        <div>
            <h2 style={{ fontSize: 32, textAlign: "center", marginTop: 15 }}>楼栋基本管理及信息</h2>
            <Row style={{ textAlign: "center" }}>
                {data.map((item) => {
                    return <Card title={item.name} bordered={false} style={{ width: 300, marginTop: 15, marginRight: 30, marginLeft: 15 }} key={item._id} hoverable data={item.name} onClick={(e) => {
                        const username = e.currentTarget.getAttribute("data");
                        chanename(username)
                        vhangevisible(true)
                    }}>
                        <p>修建时间：{item.time}</p>
                        <p>可容纳：{item.capacity}人</p>
                    </Card>
                })}


            </Row>
            <Modal title={name} visible={visible} footer="" onCancel={() => {
                vhangevisible(false)
            }} width={850}>
                <List data={name}></List>
            </Modal>
        </div>
    )
}
export default Ridgepole